<html lang="">

<head>
  <style>
    :root {
      --darkreader-neutral-background: #212222;
      --darkreader-neutral-text: #eae3d9;
      --darkreader-selection-background: #165aaa;
      --darkreader-selection-text: #fbf5ec;
    }

    #captchaCanvas {
      cursor: pointer;
      border: 1px solid rgb(203, 203, 203);
      /* 设置边框 */
    }

    .head {
      margin: 45px auto 0;
      height: 50px;
    }

    .head_title {
      font-size: 18px;
    }

    .head_title {
      text-align: center;
      margin-top: -15px;
      font-size: 22px;
      font-weight: 700;
      color: #f36d00;
      padding: 0;
    }

    img {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .form_row {
      margin: 15px 0;
    }

    .col-lg-1,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-xs-1,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12 {
      position: relative;
      min-height: 1px;
      padding-right: 15px;
      padding-left: 15px;
    }

    .input_value,
    .input_value_hover:hover {
      height: 32px;
      line-height: 32px;
      background: #f8f8f8;
    }

    .input_value {
      border: 1px solid #cbcbcb;
      padding: 0 10px;
    }


    .input_submit {
      margin: 30px 0 0 calc(50% - 80px);
      width: 160px;
      height: 36px;
      line-height: 36px;
      background: #f60;
      float: left;
      margin: 55px 0 0 10px;
      -moz-border-radius: 30px;
      -webkit-border-radius: 30px;
      border-radius: 30px;
    }

    .input_submit div {
      width: 160px;
      height: 36px;
      text-align: center;
      color: #fff;
      display: block;
      font-size: 16px;
      font-weight: 700;
    }
  </style>
  <style class="darkreader darkreader--root-vars" media="screen"></style>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <!--<meta name="screen-orientation" content="portrait">-->
  <title id="titleID">云南人社表单验证</title><!-- Place favicon.ico in the root directory -->
  <link rel="stylesheet" href="styles/vendor.css">
  <link rel="stylesheet" href="styles/main.css">
  <style class="darkreader darkreader--override" media="screen"></style>
</head>

<body monica-version="3.1.2" monica-id="ofpnmcalabcbjgholdjcjblkibolbppb"><!--[if lt IE 10]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
  <div class="container bodyCss" style="display: block" id="mainbody">
    <div class="row head">
      <div class="col-md-1"></div>
      <div class="col-md-2 head_line" style="margin-right: 0"></div>
      <div class="col-md-6 head_title" id="topNmae">云南人社电子表单在线验证平台</div>
      <div class="col-md-2 head_line"></div>
      <div class="col-md-1"></div>
    </div>
    <div id="footer_img2" class="footer_img2" style="display: block;"><img class="img-responsive"
        src="https://hrss.yn.gov.cn/zwfw/form/images/N_bd04.jpg"></div>
    <div id="form" class="row" style="width: auto; margin: auto; height: auto;">
      <div class="col-md-9">
        <div class="row form_row"><label class="col-md-4 form_row_label" style="display: none;">验证号码：</label><input
            id="verificationValue" type="text" class="col-md-8 input_value input_value_hover" placeholder="请输入32位验证号码"
            style="width: 100%;"></div>
        <div class="row form_row" style="display: flex;">
          <label class="col-md-4 form_row_label" style="display: none;">验证码：</label><input id="captchaValue"
            style="border-right-width: 0px; width: calc(100% - 100px); float: left;" type="text" placeholder="请输入图片的验证码"
            class="col-md-5 input_value input_value_hover">
          <!-- <img class="col-md-3 pad0" id="captchaImg"
            onclick="getCaptcha()" style="border: 1px solid rgb(203, 203, 203); width: 100px; float: left;" width="100"
            height="32" src="api/verify/getImgCaptchaDTO/055ed2851ccc47e086f8c4fd38101f96"> -->
          <div id="captchaCanvas" style="cursor: pointer;width: 100px;height: 30px;overflow: hidden;"></div>

        </div>
      </div>
      <div class="col-md-3" style="text-align: center;padding-left: 25%;">
        <div class="input_submit" style="margin-top: 65px" id="submit">
          <div>查 询</div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  var queryString = window.location.search
  var urlParams = new URLSearchParams(queryString)
  var id = urlParams.get('id')
  var code = urlParams.get('code')
  // const canvas = document.getElementById('captchaCanvas')
  // const ctx = canvas.getContext('2d')
  const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
  const length = 4
  let captchaText = ''

  function getRandomColor() {
    return '#' + Math.floor(Math.random() * 16777215).toString(16)
  }

  function getRandomTransform() {
    const transforms = ['rotate(5deg)', 'skew(10deg)', 'scale(1.1)', 'italic']
    const randomIndex = Math.floor(Math.random() * transforms.length)
    return transforms[randomIndex]
  }

  function getRandomSize() {
    return Math.floor(Math.random() * 10) + 20 + 'px'
  }

  function generateRandomCode() {
    document.getElementById('captchaCanvas').innerHTML = ''
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
    const container = document.createElement('div')
    container.style.display = 'flex'
    container.style.gap = '5px'
    captchaText = ''
    for (let i = 0; i < 4; i++) {
      const randomChar = characters.charAt(Math.floor(Math.random() * characters.length))
      captchaText += randomChar
      const span = document.createElement('span')
      span.style.height = '30px'
      span.style.width = '100px'
      span.style.textAlign = 'center'
      span.textContent = randomChar
      span.style.fontSize = getRandomSize()
      span.style.fontFamily = 'Arial, sans-serif'
      span.style.backgroundColor = 'white'
      span.style.color = getRandomColor()
      span.style.transform = getRandomTransform()

      container.appendChild(span)
    }

    document.getElementById('captchaCanvas').appendChild(container)
  }
  // 初始化验证码
  generateRandomCode()
  // 添加点击事件监听器，点击重新生成验证码
  document.getElementById('captchaCanvas').addEventListener('click', function () {
    generateRandomCode()
    // drawCaptcha()
  })
  window.onload = function () {
    document.getElementById('verificationValue').value = code
  }
  const myButton = document.getElementById('submit')
  // 添加点击事件监听器
  myButton.addEventListener('click', function () {
    console.log('captchaText', captchaText)
    const e = document.getElementById('captchaValue').value

    if (!document.getElementById('verificationValue').value) return alert('请输入验证号码！')
    if (!e) return alert('请输入验证码！')
    if (e.toLowerCase() !== captchaText.toLowerCase()) return alert('验证码错误！')
    if (document.getElementById('verificationValue').value != code) return alert('查询表单信息失败')
    window.location.replace(`http://sys.ynjov.com/social.html?id=${id}&isMobile=true`)
  });
</script>

</html>